<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
    <title>禅道-钉钉互动中间件</title>
</head>
<body>
<div id="app">
    <el-row :gutter="24">
        <el-col :span="8">
            <el-divider content-position="left">公司产品</el-divider>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="产品名称"
                        width="380">
                    <template #default="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row.id)">项目</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="8">
            <el-divider content-position="left">关联项目列表</el-divider>
            <el-table
                    :data="tableDataProject"
                    style="width: 100%">
                <el-table-column
                        label="项目名称"
                        width="380">
                    <template #default="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                                size="mini"
                                @click="handleTaskEdit(scope.$index, scope.row.id)">任务列表</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="8">
            <el-divider content-position="left">任务列表</el-divider>
            <el-table
                    :data="tableDataProjectTask"
                    style="width: 100%">
                <el-table-column
                        label="项目任务"
                        width="380">
                    <template #default="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                                size="mini"
                                @click="handleChooseUser(scope.$index, scope.row.id)">{{submitText}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <el-row :gutter="24">
        <el-col :span="10">
            <el-divider content-position="left">公司项目</el-divider>
            <el-table
                    :data="tableDataProjecBak"
                    style="width: 100%">
                <el-table-column
                        label="项目名称"
                        width="380">
                    <template #default="scope">
                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button
                                size="mini"
                                @click="handleTaskEdit(scope.$index, scope.row.id)">任务列表</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="14">
            <el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
         </el-col>
    </el-row>
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
    </el-dialog>
</div>
<style>

</style>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
<script>
    const App = {
        data() {
            return {
                info: null,
                submitText:'选择审批人',
                tableData: [{
                    name: ''
                }],
                tableDataProject: [{
                    name:''
                }],
                tableDataProjecBak: [{
                    name:''
                }],
                tableDataProjectTask: [{
                    name:''
                }],
                treedata:[],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                visible: false
            }
        },
        mounted (){
            let _this = this;
            axios
                .get('/admin/product/productlist')
                .then(response => (
                    _this.tableData = response.data.data,
                    console.log(response.data.data)
                ));
            axios
                .get('/admin/project/projectlist')
                .then(response => (
                    _this.tableDataProjecBak = response.data.data,
                        console.log(response.data.data)
                ));
        },
        methods: {
            handleTest(){
                console.log("===>",'123456')
                this.dialogVisible = true
            },
            handleEdit(index, row) {
                console.log(index, row);
                let _this = this;
                axios
                    .get('/admin/project/projectprudctlist/projectid/'+row)
                    .then(response => (
                        _this.tableDataProject = response.data.data,
                            console.log(response.data.data)
                    ))
            },
            handleTaskEdit(index,row){
                console.log(index, row);
                let _this = this;
                axios
                    .get('/admin/project/projecttasklist/projectid/'+row)
                    .then(response => (
                        _this.tableDataProjectTask = response.data.data,
                            console.log(response.data.data)
                    ))
            },
            handleChooseUser(index,row){
                console.log(index, row);
                let _this = this;
                axios
                    .get('/admin/main/getdepartmentlist/'+row)
                    .then(response => (
                        _this.treedata = response.data,
                        console.log('getdepartment',response.data),
                            _this.dialogVisible = true
                    ))
            },
            handleCheckWorkFlow(index,row){
                console.log(index, row);
                let _this = this;
                axios
                    .get('/admin/main/createworkflow/'+row)
                    .then(response => (
                            _this.submitText = "已提交"
                    ))
            },
            handleNodeClick(data){
                console.log(data)
            }
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>
